<template>
    <el-container class="admin-detail">
        <el-main class="sa-p-b-0">
            <el-row :gutter="24">
                <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                    <div class="title">基本信息</div>
                    <div class="bottom">
                        <div class="sa-flex sa-row-between sa-m-b-16">
                            <div class="sa-flex sa-flex-1">
                                <sa-image :url="detail.data.nurse_picture || defAvatar" size="64" radius="32" />
                                <div class="sa-m-l-20 sa-flex-1">
                                    <div class="nickname sa-m-b-8 sa-table-line-1">
                                        {{ detail.data.nurse_name ||"店员名称"}}
                                    </div>
                                </div>
                            </div>
                            <el-button v-auth="'seller.admin.nurse.add'" type="primary" @click="onUpload">{{detail.data.nurse_picture ?  '更换头像':'上传头像'}}</el-button>
                        </div>
                        <div class="info">
                            <el-row :gutter="24">
                                <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">店员名称</div>
                                    <div class="content">
                                        <el-input  maxlength='10' v-model="detail.data.nurse_name" placeholder="请输入店员的名称" />
                                    </div>
                                </el-col>
                                <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">店员编号</div>
                                    <div class="content">
                                        <el-input  maxlength='30' v-model="detail.data.nurse_number"  placeholder="请输入店员的编号"/>
                                    </div>
                                </el-col>
                                <!-- <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">性别</div>
                                    <div class="content">
                                        <el-radio-group v-model="detail.data.gender">
                                            <el-radio :label="0">未知</el-radio>
                                            <el-radio :label="1">男</el-radio>
                                            <el-radio :label="2">女</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col> -->
                                <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">店员职位</div>
                                    <div class="content">
                                        <el-input  maxlength='10' v-model="detail.data.nurse_job"  placeholder="请输入店员职位"/>
                                    </div>
                                </el-col>
                                <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">店员类型</div>
                                    <div class="content">
                                        <el-select v-model="detail.data.nurse_type_id" placeholder="请选择店员类型">
                                            <el-option
                                            v-for="item in detail.typeList"
                                            :key="item.id"
                                            :label="item.nurse_type_name"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                                <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">从业时间</div>
                                    <div class="content sa-flex">
                                        <el-input v-model="detail.data.nurse_life" type="number"></el-input>
                                        <div class="sa-m-l-10">年</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="info sa-m-t-16">
                            <el-row :gutter="24">
                                <el-col class="item-textarea sa-col-24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">擅长类型</div>
                                    <div class="content">
                                        <el-input type="textarea" maxlength='30' style="width: 360px;" autosize v-model="detail.data.proficient_content" placeholder="请输入擅长类型" />
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="info  sa-m-t-16">
                            <el-row :gutter="24">
                                <el-col class="item-textarea sa-col-24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="label">简介内容</div>
                                    <div class="content">
                                        <el-input type="textarea" maxlength='150' style="width: 360px;" autosize v-model="detail.data.brief_introduction" placeholder="请输入简介内容" />
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <el-footer class="sa-footer--submit">
            <el-popconfirm width="220" confirm-button-text="确认返回" cancel-button-text="取消" title="返回将清楚已修改数据！是否确认返回？"
                @confirm="emit('modalCallBack', { event: 'confirm' })">
                <template #reference>
                    <el-button style="margin-right:20px">返回</el-button>
                </template>
            </el-popconfirm>
            <el-button  v-auth="'seller.admin.nurse.edit'" v-if="props.modal.params.type == 'add'" type="primary" @click="onSave">保存</el-button>
            <el-button v-auth="'seller.admin.nurse.edit'" v-if="props.modal.params.type == 'edit'" type="primary" @click="onUpdata">更新</el-button>
        </el-footer>
    </el-container>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import {api} from '../settings.service';
import { useFile } from '@/sheep/hooks';
import { useRouter } from 'vue-router';
import {ElMessage } from 'element-plus';
const emit = defineEmits(['modalCallBack']);
const props = defineProps(['modal']);
const router = useRouter();
const defAvatar = "/static/img/default_avatar.png"
const detail = reactive({
    loading: false,
    data: {
        nurse_job:'',
        nurse_name:'',
        nurse_life:0,
        nurse_number:'',
        nurse_picture:'',
        nurse_type_id:'',
        proficient_content:'',
        brief_introduction:'',
    },
    typeList:[]
});
async function getTypeList() {
    const { error, data } = await api.teams.typeList();
    if (error === 0) {
        detail.typeList = data
    }
}
async function getDetail() {
    detail.loading = true;
    const { error, data } = await api.teams.detail(props.modal.params.id);
    console.log('getDetail',data)
    error === 0 && (detail.data = data.nurseInfo);
    delete detail.data.create_time;
    delete detail.data.update_time;
    detail.loading = false;
}

function onUpload() {
    useFile(
        {
            fileType: 'image',
        },
        {
            confirm: (data) => {
                detail.data.nurse_picture = data.url;
            },
        },
    );
}

async function onSave() {
    let msg
    if(!detail.data.nurse_name){
        msg='请输入店员姓名'
    }else if (!detail.data.nurse_number){
        msg='请输入店员编号'
    }else if (!detail.data.nurse_job){
        msg='请输入店员职位'
    }else if (!detail.data.nurse_type_id){
        msg='请输入店员类型'
    }else if(detail.data.nurse_life<0){
        msg='请输入正确的从业时间'
    }
    if (msg) return ElMessage({
        message: msg,
        type: 'error',
    })
    const { error } = await api.teams.add({nurses:{
        ...detail.data,
        nurse_picture:detail.data.nurse_picture||defAvatar,
    }});
    if(error == 0)emit('modalCallBack', { event: 'confirm' })
    
}
async function onUpdata() {
    let msg
    if(!detail.data.nurse_name){
        msg='请输入店员姓名'
    }else if (!detail.data.nurse_number){
        msg='请输入店员编号'
    }else if (!detail.data.nurse_job){
        msg='请输入店员职位'
    }else if (!detail.data.nurse_type_id){
        msg='请输入店员类型'
    }else if(detail.data.nurse_life<0 ||detail.data.nurse_life>=40){
        msg='请输入正确的从业时间'
    }
    if (msg) return ElMessage({
        message: msg,
        type: 'error',
    })
    const { error } = await api.teams.edit(props.modal.params.id, 
    { nurses:{
        ...detail.data,
        nurse_picture:detail.data.nurse_picture||defAvatar,
    }});
    if(error == 0)emit('modalCallBack', { event: 'confirm' })
}

onMounted(() => {
    getTypeList()
    console.log('props.modal.params.type',props.modal.params.type)
    if(props.modal.params.type=='edit'){
        getDetail();
    }
});
</script>

<style lang="scss" scoped>
.admin-detail {
    .title {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: var(--sa-subtitle);
        margin-bottom: 8px;
    }

    .bottom {
        padding: 16px;
        background: var(--sa-table-header-bg);
        border-radius: 8px;
        margin-bottom: 20px;

        .nickname {
            line-height: 20px;
            font-size: 20px;
            font-weight: 500;
            color: var(--sa-subtitle);
        }

        .id {
            line-height: 16px;
            font-size: 16px;
            font-weight: 500;
            color: var(--sa-subfont);
        }

        .info {
            padding: 16px 16px 0;
            background: var(--sa-background-assist);
            border-radius: 4px;
            .item-textarea{
                display: flex;
                align-items: start;
                margin-bottom: 16px;

                .label {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #3d3d3d;
                    margin-right: 10px;
                }

                .content {

                }
            }
            .item {
                margin-bottom: 16px;

                .label {
                    height: 12px;
                    line-height: 12px;
                    font-size: 12px;
                    font-weight: 500;
                    color: var(--sa-subfont);
                    margin-bottom: 8px;
                }

                .content {
                    line-height: 32px;
                    font-size: 14px;
                    font-weight: 400;
                    color: var(--sa-subtitle);
                }
            }
        }
    }

    .third-oauth {
        .info {
            padding: 20px 16px 0;

            .item {
                margin-bottom: 24px;

                img {
                    width: 32px;
                    height: 32px;
                }

                .name {
                    color: var(--sa-font);
                }

                .none {
                    color: #999;
                }
            }
        }
    }

    .log {
        .bottom {
            padding: 0;
            background: var(--sa-background-assist);

            :deep() {
                .el-tabs__nav-wrap::after {
                    height: 0;
                }
            }

            .sa-table {
                height: 300px;
            }

            :deep() {
                .oper-type {
                    font-size: 12px;
                    color: var(--sa-subtitle);
                }

                .system {
                    font-size: 14px;
                    color: var(--sa-subtitle);

                    img {
                        width: 32px;
                        height: 32px;
                        margin-right: 8px;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 1200px) {
        @for $i from 0 through 24 {
            .sa-col-#{$i} {
                max-width: calc(calc($i * 100%) / 24) !important;
                flex: 0 0 calc(calc($i * 100%) / 24) !important;
            }
        }
    }
}
</style>